<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
        <doctor-info :item="item" name="关注" class="wrap" v-for="item in list" :key="item" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getPageDocRequest } from '@/services/home'

// 屏幕滑动触底了就自动执行 onload函数， 自动吧loading修改为true
// 如果开始的数据没有铺满整个屏幕，也会自动发请求，将loading修改为true
const loading = ref(false)
const finished = ref(false)

const list = ref<any[]>([])

// 含义和loading类似，
// 开始设置为false，下拉一开始，组件自动将refreshing设置为true。 下拉刷新结束以后，我们需要手动将这个值在设置为false
const refreshing = ref(false)
const current = ref(1)

// 下面是上拉 翻页的请求
const onLoad = async () => {
  const res = await getPageDocRequest({ current: current.value, pageSize: 10 })

  if (refreshing.value) {
    // 这里的if是给 下拉刷新使用的，重置数据的
    list.value = []
    refreshing.value = false
  }

  list.value.push(...res.data.rows)
  loading.value = false

  if (list.value.length >= res.data.total) {
    finished.value = true
  }

  current.value++

  // setTimeout(() => {
  //   console.log('开始翻页')

  //   if (refreshing.value) {
  //     // 特殊场景：如果用户真正下拉刷新，这个时候我们再去上拉翻页
  //     list.value = [1, 2, 3, 4]
  //     refreshing.value = false
  //   }
  //   list.value.push(4, 5, 6, 7)
  //   loading.value = false

  //   if (list.value.length >= 25) {
  //     finished.value = true
  //   }
  // }, 1000)
}

const onRefresh = () => {
  // 下面这个重置以后，我们才可以在上来翻页
  current.value = 1
  finished.value = false
  loading.value = true
  onLoad()
}

// 下面是下拉刷新的请求
// 下拉刷新的页面本质就是： 将所有数据重置为初始值
// 下拉刷新核心组件 <pull-refresh></pull-refresh>  v-model="refreshing" 变量 refreshing控制是否在下拉  refresh事件控制下拉的时候执行的函数
// const onRefresh = () => {
//   setTimeout(() => {
//     // 下面这个重置以后，我们才可以在上来翻页
//     finished.value = false
//     // 加上了下拉刷新以后，只要一下拉，loading是van-list组件是否可以发请求的变量，必须一下拉结束就手动将这个loading修改为true，就可以出发上拉翻页的请求
//     loading.value = true
//     // list.value = [1, 2, 3, 4]

//     // 下拉刷新请求结束以后，再将下拉刷新修改为fasle，这样就可以在下拉
//     // refreshing.value = false
//     // 手动调用 触底的函数
//     onLoad()

//     console.log(loading.value)
//   }, 1000)
// }
</script>

<style lang="scss" scoped>
.wrap {
  padding: 10px 20px;
}
</style>
